<!-- /**
* index.html
* @author bulbasaur
* @description 
* @created 2020-06-10T10:59:36.235Z+08:00
* @copyright None 
* None
* @last-modified 2020-06-11T08:27:04.684Z+08:00
*/ -->




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Cart</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="../HWIII/css/style.css">
<body>
    <!-- main app -->
    <div id="app">
        <!-- 判断是否为空 -->
        <div class="cart-full" v-if="list.length">
            <div class="table">
                <table>
                    <!-- 表头 -->
                    <thead>
                        <tr>
                            <th><input id="checkAll" type="checkbox" class="checkAll" @click="checkAllOrNot($event)"></th>
                            <th>No.</th>
                            <th>Product</th>
                            <th>Image</th>
                            <th>Price</th>
                            <th>Number</th>
                            <th>Operation</th>
                        </tr>
                    </thead>
                    <!-- Information -->
                    <tbody>
                        <tr v-for="(item, index) in list">
                            <td>
                                <input type="checkbox" class="checkItem" @click="checkItem($event, index)">
                            </td>
                            <td>
                                <!-- 序号从 1 开始 -->
                                {{ index + 1 }}
                            </td>
                            <!-- 输出名字 -->
                            <td>
                                {{ item.name }}
                            </td>
                            <!-- 输出图片 -->
                            <td>
                                <img :src="item.img" :alt="item.name">
                            </td>
                            <!-- 输出价格 -->
                            <td>
                                $ {{ item.price }}
                            </td>
                            <!-- Price Line -->
                            <td>
                                <button @click="reduceCount(index)" :disabled="item.count === 1"> - </button>
                                <!-- price -->
                                {{item.count}}
                                <button @click="addCount(index)"> + </button>
                            </td>
                            <!-- Operation Line -->
                            <td>
                                <button @click="remove(index)"> Remove </button>
                            </td>
                        </tr>
                        
                    </tbody>
                </table>
                <div class="my-cart">
                    <my-cart></my-cart>
                </div>
                <div class="total">
                    <div class="header">
                        Total:
                    </div>
                    <div class="price">
                        $ {{totalPrice}}
                    </div>
                </div>
                <div class="jumbotron addCom">
                    <h1 class="display-4">Add Item</h1>
                    <hr class="my-4">
                    <p>
                        <span>Product</span>
                        <input type="text" placeholder="Product Name" disabled="disabled" value="宽松棉服羊羔绒外套"> <br>
                    </p>
                    <p>
                        <span>Image</span>
                        <input type="text" placeholder="Product Image" disabled="disabled" value="http://pic.616pic.com/ys_b_img/00/46/64/I4P0zom0qY.jpg" size="55"> <br>
                    </p>
                    <p>
                        <span>Price</span>
                        <input type="text" placeholder="Product Price" disabled="disabled" value="$ 168.00"> <br>
                    </p>
                    <a class="btn btn-primary btn-lg" href="#" role="button" @click="add()">Add</a>
                  </div>
            </div>
        </div>
        <!-- 如果为空 -->
        <div class="cart-empty" v-else>
            <p>There is nothing in the Cart ~</p>
        </div>
    </div>


    <script src="js/index.js"></script>
</body>
</html>